<template>
    <div class="header_container">

		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">{{item}}</el-breadcrumb-item>
		</el-breadcrumb>
		<el-dropdown menu-align='start'>
			<img :src="uInfo.avatar" class="avator">
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="home">首页</el-dropdown-item>
				<el-dropdown-item @click.native="loginOut()">退出</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
    </div>
</template>

<script>
	import {signout} from '@/api/getData'
	import {baseImgPath} from '@/config/env'
	import {mapActions, mapState} from 'vuex'

    export default {
    	data(){
    		return {
                uInfo: JSON.parse(sessionStorage.getItem("uInfo")),
    		}
    	},
    	created(){

    	},
    	computed: {

    	},
		methods: {
            loginOut(){
                this.$api.get('admin/loginOut', {}).then((res) => {
                    if(res.code == 1){
                        sessionStorage.removeItem('uInfo');
                        this.$message({
                            type: 'success',
                            message: '退出成功'
                        });
                        this.$router.push('/')
					}
                })
			}
		}
    }
</script>

<style lang="less">
	@import '../../style/mixin';
	.header_container{
		background-color: #EFF2F7;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 20px;
	}
	.avator{
		.wh(36px, 36px);
		border-radius: 50%;
		margin-right: 37px;
	}
	.el-dropdown-menu__item{
        text-align: center;
    }
</style>
